<template>
	<view>
		<u-navbar title="详情" :is-back="true" :background="background" titleColor="#fff">
			<u-icon slot="left" name="arrow-left" color="#ffffff" @click="goBack"></u-icon>
		</u-navbar>
		<view class="detail">
			<img :src="flavor.cover_img" alt="商品图片" />
			<h1>{{ flavor.good_name }}</h1>
			<p><strong>食材：</strong>{{ flavor.shicai }}</p>
			<p><strong>制作方法：</strong>{{ flavor.cook }}</p>
		</view>
		<view class="footer">
			<u-button type="primary" @click="toggleFavorite">{{ isFavorite ? '取消收藏' : '收藏' }}</u-button>
			<u-button type="success" @click="addToCart">加入购物车</u-button>
		</view>
	</view>
</template>

<script>
	import {
		mapMutations
	} from 'vuex';
	import {
		getFavoriteList,
		deleteFavorite
	} from '../../services/favorite';
	import {
		addFavoriteList
	} from '@/services/detail.js'
	import {
		addShopping
	} from '@/services/shopping.js';

	export default {
		data() {
			return {
				flavor: {},
				background: {
					'background-image': 'linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63))'
				},
				isFavorite: false // 初始状态，未收藏
			};
		},
		methods: {
			...mapMutations(['setToken']), // 映射Vuex的mutations
			recordFootprint(goodId) {
				const footprintItem = {
					id: this.$u.guid(), // 假设 $u.guid() 是一个生成唯一ID的方法
					good_id: goodId,
					cover_img: this.flavor.cover_img,
					good_name: this.flavor.good_name
				};
				// 保存到本地存储
				const footprints = uni.getStorageSync('footprints') || [];
				footprints.unshift(footprintItem); // 添加到列表的开头
				uni.setStorageSync('footprints', footprints);
			},
			async fetchFlavorDetails(goodId) {
				try {
					const response = await uni.request({
						url: `http://localhost:8084/flavor/getflavor/${goodId}`,
						method: 'GET'
					});
					if (response[1].data.status === 1) {
						this.flavor = response[1].data.data[0];
						this.checkFavoriteStatus(this.flavor.id);
						this.recordFootprint(goodId); // 记录足迹
					} else {
						console.error(response[1].data.message);
					}
				} catch (error) {
					console.error(error);
				}
			},
			async toggleFavorite() {
				const id = this.flavor.id;
				if (this.isFavorite) {
					await deleteFavorite(id)
				} else {
					await addFavoriteList({
						name: this.flavor.good_name,
						goodId: this.flavor.id,
						remark: this.flavor.remark,
						coverImg: this.flavor.cover_img
					})
					uni.showToast({
						icon: 'success',
						title: '收藏成功'
					})
					this.checkFavoriteStatus(this.flavor.id);
				}
			},
			async checkFavoriteStatus(goodId) {
				try {
					console.log(goodId)
					const response = await getFavoriteList();
					if (response.status === 1) {
						console.log(response.successMessage)
						this.isFavorite = response.successMessage.some(item => item.id === goodId);
						console.log(this.isFavorite)
					} else {
						console.error(response.message);
					}
				} catch (error) {
					console.error('检查收藏状态失败:', error);
					this.isFavorite = false;
				}
			},
			goBack() {
				uni.navigateBack();
			},
			async addToCart() {
				await addShopping(this.flavor.id);
				uni.showToast({
					title: '加入购物车成功',
					icon: 'success'
				});
			}
		},
		created() {
			const goodId = this.$route.query.good_id;
			this.fetchFlavorDetails(goodId);
		}
	};
</script>

<style scoped>
	img {
		max-width: 100%;
		height: auto;
	}

	h1 {
		font-size: 24px;
		margin: 20px 0;
	}

	p {
		font-size: 18px;
		margin: 10px 0;
	}

	.footer {
		display: flex;
		justify-content: space-around;
		margin-top: 20px;
	}
</style>